<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2023-11-06 16:45:10
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2025-04-14 17:35:08
 * @FilePath: \hy-ui\src\views\render\components\pagerSearchCondition.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="pagerSearchCondition" v-if="searchJson">
    <el-form :model="form" ref="queryParamsRef" :label-width="`${searchJson.filter.labelWidth || 120}px`"
      class="demo-ruleForm">
      <el-row :gutter="20">
        <el-col :span="item.md" v-for="(item, index) in searchJson.filter.body.columns" :key="index"
          v-show="isShowSearchForm || index <= colWidth"><el-form-item :label="item.label"
            v-if="item.type === 'input-text'" :prop="item.name">
            <template slot="label">
              <el-tooltip class="item" effect="dark" :content="item.label" placement="top">
                <span>{{ item.label }}</span>
              </el-tooltip>
            </template>
            <el-input v-model="form[item.name]" :placeholder="`请输入${item.placeholder}`" size="small"
              :clearable="item.clearable"></el-input>
          </el-form-item>
          <el-form-item :label="item.label" v-if="item.type === 'customModal'" :prop="`${item.name}.names`">
            <template slot="label">
              <el-tooltip class="item" effect="dark" :content="item.label" placement="top">
                <span>{{ item.label }}</span>
              </el-tooltip>
            </template>
            <el-input v-model="form[`${item.name}.names`]" :placeholder="`请输入${item.placeholder}`" size="small"
              :clearable="item.clearable"></el-input>
          </el-form-item>
          <!-- <el-form-item :label="item.label" v-if="['dept', 'user'].includes(item.type)" :prop="`${item.name}_view`">
            <template slot="label">
              <el-tooltip class="item" effect="dark" :content="item.label" placement="top">
                <span>{{ item.label }}</span>
              </el-tooltip>
            </template>
            <div @click="() => handleOpen(item, item.name)">
              <el-input v-model="form[`${item.name}_view`]" :placeholder="`请选择${item.placeholder}`" readonly
                suffix-icon="el-icon-s-tools"></el-input>
            </div>
          </el-form-item> -->
          <el-form-item :label="item.label" v-if="['user'].includes(item.type)" :prop="`${item.name}`">
            <template slot="label">
              <el-tooltip class="item" effect="dark" :content="item.label" placement="top">
                <span>{{ item.label }}</span>
              </el-tooltip>
            </template>
            <SelectUserTable :chooseType="item.multiple" :defaultValue="form[`${item.name}`]" style="width:100%"
              size="small" :userChange="val => userChange(val, item)" :placeholder="`请选择${item.placeholder}`"
              :config="item" />
          </el-form-item>
          <el-form-item :label="item.label" v-if="['dept'].includes(item.type)" :prop="`${item.name}`">
            <template slot="label">
              <el-tooltip class="item" effect="dark" :content="item.label" placement="top">
                <span>{{ item.label }}</span>
              </el-tooltip>
            </template>
            <tree-select :width="320" :height="350" :data="deptOptions[item.name]" :defaultProps="deptProps"
              ref="deptTreeSelectRef" size="small" :multiple-limit="1" :checkStrictly="false"
              :multiple="item.multiple === 'YES'" nodeKey="id" @change="(val, row) => handleDeptChange(val, row, item)">
            </tree-select>
          </el-form-item>
          <el-form-item :label="item.label" v-if="item.type === 'input-number'" :prop="item.name">
            <template slot="label">
              <el-tooltip class="item" effect="dark" :content="item.label" placement="top">
                <span>{{ item.label }}</span>
              </el-tooltip>
            </template>
            <el-input-number style="width: 100%" v-model="form[item.name]" :placeholder="`请输入${item.placeholder}`"
              size="small" :clearable="item.clearable" controls-position="right"></el-input-number>
          </el-form-item>
          <el-form-item :label="item.label" v-if="item.type === 'textarea'" :prop="item.name">
            <template slot="label">
              <el-tooltip class="item" effect="dark" :content="item.label" placement="top">
                <span>{{ item.label }}</span>
              </el-tooltip>
            </template>
            <el-input type="textarea" :rows="1" v-model="form[item.name]" :placeholder="`请输入${item.placeholder}`"
              size="small" :clearable="item.clearable"></el-input>
          </el-form-item>
          <el-form-item :label="item.label" v-if="item.type === 'select' || item.type === 'dic'" :prop="item.name"
            filterable>
            <template slot="label">
              <el-tooltip class="item" effect="dark" :content="item.label" placement="top">
                <span>{{ item.label }}</span>
              </el-tooltip>
            </template>
            <el-select style="width: 100%" v-model="form[`${item.name}_label`]" :placeholder="`请选择${item.placeholder}`"
              size="small" :clearable="item.clearable" :multiple="item.multiple === 'YES'"
              @change="val => handleChange(val, item)">
              <el-option :label="val.dictLabel" :value="val.dictValue" v-for="val in dictData[item.formatQ]"
                :key="val.dictCode"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="item.label" v-if="item.type === 'custom'" :prop="item.name">
            <template slot="label">
              <el-tooltip class="item" effect="dark" :content="item.label" placement="top">
                <span>{{ item.label }}</span>
              </el-tooltip>
            </template>
            <el-select style="width: 100%;" v-model="form[`${item.name}_label`]" :placeholder="`请选择${item.placeholder}`"
              size="small" :clearable="item.clearable" filterable :multiple="item.multiple === 'YES'"
              @change="val => handleChange(val, item)">
              <el-option :label="val[item.formatQ.displayField]" :value="val[item.formatQ.saveField]"
                v-for="val in interfaceList[item.name]" :key="val[item.formatQ.saveField]"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="item.label" v-if="item.type === 'input-date'" :prop="item.name">
            <template slot="label">
              <el-tooltip class="item" effect="dark" :content="item.label" placement="top">
                <span>{{ item.label }}</span>
              </el-tooltip>
            </template>
            <el-date-picker style="width: 100%" v-model="form[item.name]" :type="item.datQ" size="small"
              :placeholder="`请选择${item.placeholder}`" :clearable="item.clearable" :format="item.datQ === 'date'
                ? item.formatQ
                : item.datQ === 'month'
                  ? 'yyyy-MM'
                  : item.datQ === 'year'
                    ? 'yyyy'
                    : undefined
                " :value-format="item.datQ === 'date'
    ? item.formatQ
    : item.datQ === 'month'
      ? 'yyyy-MM'
      : item.datQ === 'year'
        ? 'yyyy'
        : undefined
    ">
            </el-date-picker>
          </el-form-item>
          <el-form-item :label="item.label" v-if="item.type === 'input-date-range'" :prop="item.name">
            <template slot="label">
              <el-tooltip class="item" effect="dark" :content="item.label" placement="top">
                <span>{{ item.label }}</span>
              </el-tooltip>
            </template>
            <el-date-picker style="width: 100%" v-model="form[item.name]" size="small"
              :type="item.datQ === 'month' ? 'monthrange' : 'daterange'" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期" :clearable="item.clearable" :format="item.datQ === 'date'
                ? item.formatQ
                : item.datQ === 'month'
                  ? 'yyyy-MM'
                  : item.datQ === 'year'
                    ? 'yyyy'
                    : undefined
                " :value-format="item.datQ === 'date'
    ? item.formatQ
    : item.datQ === 'month'
      ? 'yyyy-MM'
      : item.datQ === 'year'
        ? 'yyyy'
        : undefined
    ">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" style="float: left">
          <span v-for="(item, index) in searchJson.headerToolbar" :key="index" v-show="zbDisplayButton !== '2'">
            <el-button v-if="hasPermissions(item)" :type="item.level" size="mini" @click="() => handleOperate(item)"
              style="margin-right: 7px">
              <svg-icon :icon-class="item.icon" style="margin-right: 3px" />{{
                item.label
              }}</el-button>
          </span>
        </el-col>
        <el-col :span="12" style="float: right; text-align: right;display:flex;align-items:center;justify-content: flex-end;">
          <span class="btnspan" v-show="searchJson.filter.body.columns &&
            searchJson.filter.body.columns.length > 4
            " style="margin-right: 10px; cursor: pointer" @click="() => (isShowSearchForm = !isShowSearchForm)"><i
              :class="[
                isShowSearchForm ? 'el-icon-arrow-up' : 'el-icon-arrow-down',
              ]"></i><span style="color: #1890ff; margin-left: 3px; font-size: 14px">{{
  isShowSearchForm ? "收起" : "展开"
}}</span></span>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getList"
            v-if="searchJson.filter.body.columns.length">查询</el-button>
          <el-button icon="el-icon-refresh-right" size="mini" v-if="searchJson.filter.body.columns.length"
            @click="handleReset">重置</el-button>
          <div style="display: flex;justify-content: flex-end;height:28px;align-items:flex-end;margin-left:12px">
            <div>
              <el-tooltip class="item" effect="dark" content="列表刷新" placement="top">
                <i class="el-icon-refresh" style="color:#1989fa;font-size:20px;margin-right:8px;cursor: pointer;"
                  @click="getList"></i>
              </el-tooltip>
              <el-popover width="200" ref="table_setting_popover" @show="popoverShow" :append-to-body="false"
                placement="bottom-start" trigger="click" popper-class="table-setting-popover">
                <div v-loading="popoverLoading">
                  <div style="border-bottom: 1px solid #dadce0;padding-bottom:4px">
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
                      @change="handleCheckAllChange">全部</el-checkbox>
                  </div>
                  <div style="margin-top:8px;max-height: 300px;overflow-y: auto;">
                    <draggable v-model="fieldList" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass"
                      handle=".el-icon-s-operation" animation="300">
                      <transition-group>
                        <div v-for="sd in fieldList" :key="sd.fieldId" style="display:flex;align-items:center;justify-content: space-between;margin-bottom:8px
"><el-checkbox @change="handleCheckedItemChange" v-model="sd.hidden" true-label="NO" false-label="YES">{{ sd.label
}}</el-checkbox> <i class="el-icon-s-operation"
                            style="color:#1989fa;font-size:20px;margin-right:8px;cursor: move;"></i></div>
                      </transition-group>
                    </draggable>
                  </div>
                  <div style="display:flex;justify-content: space-between;border-top:1px solid #dadce0">
                    <el-button size="mini" style="margin-top:6px" @click="handleCancelPopover">取 消</el-button>
                    <el-button type="primary" size="mini" style="margin-top:6px" @click="handleSubmitPopver">确
                      认</el-button>
                  </div>
                </div>
                <el-tooltip class="item" slot="reference" effect="dark" content="表头配置" placement="top">
                  <i class="el-icon-setting" style="color:#1989fa;font-size:20px;cursor: pointer;"></i>
                </el-tooltip>
              </el-popover>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <departmentModel v-if="open" :open="open" :close="() => (open = false)" :chooseType="chooseType"
      :fieldModel="fieldModel" :handleUserOrDept="handleUserOrDept" ref="departmentModelRef" />
    <userModel v-if="openUser" :open="openUser" :close="() => (openUser = false)" :chooseType="chooseTypeUser"
      :fieldModel="fieldModelUser" :handleUserOrDept="handleUserOrDeptUser" ref="userModelRef" />

  </div>
</template>
<script>
import departmentModel from "@/components/departmentModel.vue";
import userModel from "@/components/userModel.vue";
import SelectUserTable from "@/components/selectUserTable";
import TreeSelect from "@/components/TreeSelect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { deptTreeSelect, buildDeptTree, orgList } from "@/api/system/user.js";
import { mapGetters } from "vuex";
import draggable from "vuedraggable";
import { EventBus } from '@/utils/eventBus';
import moment from 'moment'
import {
  crudExport
} from "@/api/render/pager.js";
import {
  getColumns,
  setColumns
} from "@/api/render/pager.js";

export default {
  name: "HyUiPagerSearchCondition",
  props: {
    searchJson: {
      type: Object,
      default: () => { },
    },
    getList: {
      type: Function,
      default: () => { },
    },
    openModal: {
      type: Function,
      default: () => { },
    },
    dictData: {
      type: Object,
      default: () => { },
    },
    resetData: {
      type: Function,
      default: () => { },
    },
    interfaceList: {
      type: Object,
      default: () => { },
    },
    zbDisplayButton: {
      type: String,
      default: '',
    },
    init: {
      type: Function,
      default: () => { },
    },
    pageCode: {
      type: String,
      default: '',
    },
    total: {
      type: Number,
      default: 0
    }
  },
  components: {
    departmentModel,
    userModel,
    SelectUserTable,
    TreeSelect,
    draggable,
  },
  data() {
    return {
      fieldList: [],
      isShowSearchForm: false,
      form: {},
      colWidth: 3,
      fieldModel: undefined,
      chooseType: undefined,
      open: false,
      itemProp: "",
      openUser: false,
      chooseTypeUser: undefined,
      fieldModelUser: undefined,
      itemPropUser: "",
      deptOptions: {},
      deptProps: {
        children: "children",
        label: "label",
      },
      checkAll: false,
      isIndeterminate: false,
      popoverLoading: false,
      chooseArr: []
    };
  },
  computed: {
    ...mapGetters(["sidebar", "avatar", "device"]),
    loginInfo: {
      get() {
        return this.$store.state.user.loginInfo;
      },
    },
  },
  beforeDestroy() {
    EventBus.$off('chooseArr');
  },
  async mounted() {
    EventBus.$on('chooseArr', (data) => {
      this.chooseArr = data.data
    });
    if (this.searchJson?.filter?.body?.columns?.length) {
      let colWidth = 0;
      for (let [
        index,
        item,
      ] of this.searchJson?.filter?.body?.columns?.entries()) {
        colWidth += item.md;
        if (colWidth >= 24) {
          this.colWidth = colWidth === 24 ? index : index - 1;
          break;
        }
      }
      this.searchJson?.filter?.body?.columns?.forEach((item) => {
        if (item.value) {
          this.$set(this.form, item.name, item.value);
        }
      });

      for (let i = 0; i < this.searchJson?.filter?.body?.columns?.length; i++) {
        if (this.searchJson?.filter?.body?.columns[i]?.type === 'dept') {
          if (this.searchJson?.filter?.body?.columns[i]?.customConfig) {
            let config = {}
            try {
              config = JSON.parse(this.searchJson?.filter?.body?.columns[i]?.customConfig)
              if (config.deptConfig === '3') {
                const res = await buildDeptTree({ noCheckIds: config?.deptConfigCustomHalf.toString(), deptIds: config?.deptConfigCustom.toString() })
                this.$set(this.deptOptions, this.searchJson?.filter?.body?.columns[i]?.name, res.code === 200 ? res.data : [])
              } else if (config.deptConfig === '1' || config.deptConfig === '2') {
                const res = await deptTreeSelect({ ancestors: this.loginInfo.deptId, type: config.deptConfig })
                this.$set(this.deptOptions, this.searchJson?.filter?.body?.columns[i]?.name, res.code === 200 ? res.data : [])
              } else if (config.deptConfig === '5') {
                const res = await deptTreeSelect({ ancestors: config?.deptConfigCustom.toString(), type: '2' })
                this.$set(this.deptOptions, this.searchJson?.filter?.body?.columns[i]?.name, res.code === 200 ? res.data : [])
              } else if (config.deptConfig === '6') {
                const res = await orgList()
                this.$set(this.deptOptions, this.searchJson?.filter?.body?.columns[i]?.name, res.code === 200 ? res.data : [])
              } else {
                const res = await deptTreeSelect()
                this.$set(this.deptOptions, this.searchJson?.filter?.body?.columns[i]?.name, res.code === 200 ? res.data : [])
              }
            } catch {
              config = {}
            }
          } else {
            const res = await deptTreeSelect()
            this.$set(this.deptOptions, this.searchJson?.filter?.body?.columns[i]?.name, res.code === 200 ? res.data : [])
          }
        }
        // if (this.searchJson?.filter?.body?.columns[i]?.type === 'user') {
        //   if (this.searchJson?.filter?.body?.columns[i]?.customConfig) {
        //     let config = {}
        //     try {
        //       config = JSON.parse(this.searchJson?.filter?.body?.columns[i]?.customConfig)
        //       if(config.deptConfig === '3') {

        //       }else if(config.deptConfig === '1' || config.deptConfig === '2') {

        //       }else {

        //       }
        //     } catch {
        //       config = {}
        //     }
        //   }
        // }
      }
    }

  },

  methods: {
    handleChange(val, item) {
      this.form[item.name] = item.multiple === 'YES' ? val?.toString() : val
    },
    async handleSubmitPopver() {
      let index = 0
      this.fieldList.forEach(item => {
        if (item.hidden === 'NO') {
          index++
        }
      })
      if (index < 3) {
        return this.$message.error('最少需要显示三个字段')
      }
      this.popoverLoading = true
      const res = await setColumns(this.pageCode, this.fieldList)
      if (res.code === 200) {
        this.$message.success('配置成功')
        this.$refs.table_setting_popover.doClose()
        this.init()
      } else {
        this.$message.error(res.msg)
      }
      this.popoverLoading = false

    },
    handleCancelPopover() {
      this.$refs.table_setting_popover.doClose()
      this.fieldList = []
      this.isIndeterminate = false
      this.checkAll = false
    },
    handleCheckAllChange(val) {
      if (val) {
        this.fieldList.forEach(item => item.hidden = 'NO')
      } else {
        this.fieldList.forEach(item => item.hidden = 'YES')
      }
      this.isIndeterminate = false


    },
    async popoverShow() {
      this.popoverLoading = true
      const res = await getColumns(this.pageCode)
      this.fieldList = res.data
      if (this.fieldList.every(item => item.hidden === 'NO')) {
        this.isIndeterminate = false
        this.checkAll = true
      } else if (this.fieldList.every(item => item.hidden === 'YES')) {
        this.checkAll = false
        this.isIndeterminate = false
      } else {
        this.isIndeterminate = true
        this.checkAll = false
      }
      this.popoverLoading = false
    },
    handleCheckedItemChange() {
      if (this.fieldList.every(item => item.hidden === 'NO')) {
        this.isIndeterminate = false
        this.checkAll = true
      } else if (this.fieldList.every(item => item.hidden === 'YES')) {
        this.checkAll = false
        this.isIndeterminate = false
      } else {
        this.isIndeterminate = true
        this.checkAll = false
      }
    },
    handleDeptChange(val, row, item) {
      const ids = []
      if (row?.length) {
        row.forEach(x => {
          ids.push(x.value)
        })
      }
      this.$set(this.form, item.name, ids.toString())
    },
    // getDeptTree() {
    //   deptTreeSelect().then((response) => {
    //     this.deptOptions = response.data;
    //   });
    // },
    userChange(val, item) {
      this.$set(this.form, item.name, val)
      this.getList();
    },
    hasPermissions(val) {
      if (!!val.permissions) {
        let ispass = false;
        this.$store.state.user.roles?.forEach((item) => {
          if (JSON.parse(val.permissions).includes(item)) {
            ispass = true;
          }
        });
        return ispass;
      } else {
        return true;
      }
    },
    handleOpen(item, prop) {
      if (item.type === "dept") {
        this.chooseType = item.multiple;
        this.itemProp = prop;
        this.open = true;
      } else {
        this.chooseTypeUser = item.multiple;
        this.itemPropUser = prop;
        this.openUser = true;
      }
    },
    handleUserOrDept(value) {
      if (!value || !value.length) {
        this.open = false;
        this.form[this.itemProp] = undefined;
        return;
      }
      const names = [];
      const ids = [];
      value.forEach((item) => {
        names.push(item.label);
        ids.push(item.id);
      });
      this.fieldModel = {
        departmentLabel: names.toString(),
        departmentId: ids.toString(),
      };
      this.form[this.itemProp] = JSON.stringify(this.fieldModel);
      this.form[`${this.itemProp}_view`] = names.toString();
      this.open = false;
      this.getList();
    },
    handleUserOrDeptUser(value) {
      if (!value || !value.length) {
        this.openUser = false;
        this.form[this.itemPropUser] = undefined;
        return;
      }
      const names = [];
      const ids = [];
      value.forEach((item) => {
        names.push(item.nickName);
        ids.push(item.userId);
      });
      this.fieldModelUser = {
        userName: names.toString(),
        userId: ids.toString(),
      };
      this.form[this.itemPropUser] = JSON.stringify(this.fieldModelUser);
      this.form[`${this.itemPropUser}_view`] = names.toString();
      this.openUser = false;
      this.getList();
    },
    chunkArray(arr, chunkSize) {
      let result = [];
      for (let i = 0; i < arr.length; i += chunkSize) {
        result.push(arr.slice(i, i + chunkSize));
      }
      return result;
    },
    async exportMethod(data, type) {
      if (type === '1') {
        //  const index = Math.floor(data.length/100) + (data.length%100 > 0 ? 1 : 0)
        const delData = this.chunkArray(data, 500)
        for (let i = 0; i < delData.length; i++) {
          await this.download(`/frontView/page/crudExport/${this.firstLetterToLowerCase(this.$route.name)}`, {
            ids: delData[i].toString(), page: 1, perPage: 500
          }, `${this.firstLetterToLowerCase(this.$route.name)}_${moment(new Date().getTime()).format('YYYY-MM-DD')}-第${i + 1}页.xlsx`, { headers: { 'Content-Type': 'application/json' } }, true)
        }
      } else {
        if (this.total === 0) return this.$message.warning('暂无数据可以导出！')
        const index = Math.floor(this.total / 100) + (this.total % 500 > 0 ? 1 : 0)
        for (let i = 0; i < index; i++) {
          await this.download(`/frontView/page/crudExport/${this.firstLetterToLowerCase(this.$route.name)}`, {
            ...this.form, page: i + 1, perPage: 500
          }, `${this.firstLetterToLowerCase(this.$route.name)}_${moment(new Date().getTime()).format('YYYY-MM-DD')}-第${i + 1}页.xlsx`, { headers: { 'Content-Type': 'application/json' } }, true)
        }
      }
    },

    async handleOperate(item) {
      if (item.buttonType === "handleAdd") {
        if (item.actionType === "form") {
          this.openModal(item);
        } else if (item.actionType === "page") {
          // TODO
        }
      }
      if (item.buttonType === "handleAddFlow") {
        if (item.actionType === "page") {
          this.$router.push({
            path: item.tooltip,
          });
        } else if (item.actionType === "form") {
          // TODO
        }
      }
      if (item.buttonType === "handleExt") {
        //  new Function(item.optJs)()
        // TODO
      }
      if (item.buttonType === "handleExport") {
        if (item.actionType === "ajax") {
          if (this.chooseArr?.length) {
            const ids = []
            this.chooseArr.forEach(item => ids.push(item.id))
            this.exportMethod(ids, '1')
          } else {
            this.exportMethod(undefined, '2')
          }
          // this.$message.warning('开发中')
        }
      }
    },
    firstLetterToLowerCase(str) {
      return str.charAt(0).toLowerCase() + str.slice(1);
    },
    handleReset() {
      this.form = {}
      this.resetData();
      if (this.$refs?.deptTreeSelectRef && this.$refs.deptTreeSelectRef?.[0]) {
        this.$refs.deptTreeSelectRef?.[0].reset()
      }
      this.fieldModelUser = undefined;
      this.fieldModel = undefined;
      this.$forceUpdate();
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.pagerSearchCondition {
  ::v-deep .el-form-item {
    margin-bottom: 8px;

    .el-form-item__label {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  ::v-deep .el-range-editor--medium .el-range-input {
    background: #fff;
  }

  .btnspan {

    ::v-deep .el-icon-arrow-up,
    ::v-deep .el-icon-arrow-down {
      color: rgb(24, 144, 255);
      font-size: 16px;
    }
  }
}

::v-deep .table-setting-popover {
  left: unset !important;
  right: 0px !important;
  z-index: 6 !important;

  .el-checkbox {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    
  }
}
</style>